<template>
  <div>
    <img  class="header" alt="" src="../../assets/images/header.jpg">
    <img  class="content" alt="" src="../../assets/images/contentHeader.jpg">


    <div class="ActScrollX" style="width: 100%">

      <div class="ActScrollXItem"  @click="todetail(201616060301)">
        <img class="ActXimg" src="http://43.226.148.67:5000/icon/1.jpg" alt=""/>
        <p class="ActTitle">小镇珊珊毛织上衣</p>
        <p class="ActPrice">￥138</p>
        <s class="orActPrice">￥666</s>
      </div>

      <div class="ActScrollXItem"  @click="todetail(201616060302)">
        <img class="ActXimg" src="http://43.226.148.67:5000/icon/2.jpg" alt=""/>
        <p class="ActTitle">美艳纯红礼服连衣裙</p>
        <p class="ActPrice">￥138</p>
        <s class="orActPrice">￥158</s>
      </div>

      <div class="ActScrollXItem"  @click="todetail(201616060303)">
        <img class="ActXimg" src="http://43.226.148.67:5000/icon/3.jpg" alt=""/>
        <p class="ActTitle">Intel酷睿i9游戏水冷主机</p>
        <p class="ActPrice">￥8399</p>
        <s class="orActPrice">￥10500</s>
      </div>

      <div class="ActScrollXItem"  @click="todetail(201616060304)">
        <img class="ActXimg" src="http://43.226.148.67:5000/icon/4.jpg" alt=""/>
        <p class="ActTitle">汤臣倍健蛋白粉</p>
        <p class="ActPrice">￥308</p>
        <s class="orActPrice">￥338</s>
      </div>

      <div class="ActScrollXItem"  @click="todetail(201616060302)">
        <img class="ActXimg" src="http://43.226.148.67:5000/icon/2.jpg" alt=""/>
        <p class="ActTitle">美艳纯红礼服连衣裙</p>
        <p class="ActPrice">￥138</p>
        <s class="orActPrice">￥158</s>
      </div>

      <div class="ActScrollXItem"  @click="todetail(201616060303)">
        <img class="ActXimg" src="http://43.226.148.67:5000/icon/3.jpg" alt=""/>
        <p class="ActTitle">Intel酷睿i9游戏水冷主机</p>
        <p class="ActPrice">￥8399</p>
        <s class="orActPrice">￥10500</s>
      </div>

      <div class="ActScrollXItem"  @click="todetail(201616060301)">
        <img class="ActXimg" src="http://43.226.148.67:5000/icon/1.jpg" alt=""/>
        <p class="ActTitle">小镇珊珊毛织上衣</p>
        <p class="ActPrice">￥138</p>
        <s class="orActPrice">￥666</s>
      </div>

    </div>

    <div class="ActScrollX" style="width: 100%">

      <div class="ActScrollXItem"  @click="todetail(201616060303)">
        <img class="ActXimg" src="http://43.226.148.67:5000/icon/3.jpg" alt=""/>
        <p class="ActTitle">Intel酷睿i9游戏水冷主机</p>
        <p class="ActPrice">￥8399</p>
        <s class="orActPrice">￥10500</s>
      </div>

      <div class="ActScrollXItem"  @click="todetail(201616060304)">
        <img class="ActXimg" src="http://43.226.148.67:5000/icon/4.jpg" alt=""/>
        <p class="ActTitle">汤臣倍健蛋白粉</p>
        <p class="ActPrice">￥308</p>
        <s class="orActPrice">￥338</s>
      </div>

      <div class="ActScrollXItem"  @click="todetail(201616060302)">
        <img class="ActXimg" src="http://43.226.148.67:5000/icon/2.jpg" alt=""/>
        <p class="ActTitle">美艳纯红礼服连衣裙</p>
        <p class="ActPrice">￥138</p>
        <s class="orActPrice">￥158</s>
      </div>

      <div class="ActScrollXItem"  @click="todetail(201616060303)">
        <img class="ActXimg" src="http://43.226.148.67:5000/icon/3.jpg" alt=""/>
        <p class="ActTitle">Intel酷睿i9游戏水冷主机</p>
        <p class="ActPrice">￥8399</p>
        <s class="orActPrice">￥10500</s>
      </div>

      <div class="ActScrollXItem"  @click="todetail(201616060301)">
        <img class="ActXimg" src="http://43.226.148.67:5000/icon/1.jpg" alt=""/>
        <p class="ActTitle">小镇珊珊毛织上衣</p>
        <p class="ActPrice">￥138</p>
        <s class="orActPrice">￥666</s>
      </div>

      <div class="ActScrollXItem"  @click="todetail(201616060302)">
        <img class="ActXimg" src="http://43.226.148.67:5000/icon/2.jpg" alt=""/>
        <p class="ActTitle">美艳纯红礼服连衣裙</p>
        <p class="ActPrice">￥138</p>
        <s class="orActPrice">￥158</s>
      </div>

      <div class="ActScrollXItem"  @click="todetail(201616060301)">
        <img class="ActXimg" src="http://43.226.148.67:5000/icon/1.jpg" alt=""/>
        <p class="ActTitle">小镇珊珊毛织上衣</p>
        <p class="ActPrice">￥138</p>
        <s class="orActPrice">￥666</s>
      </div>

    </div>

    <div class="ActScrollX" style="width: 100%">

      <div class="ActScrollXItem"  @click="todetail(201616060302)">
        <img class="ActXimg" src="http://43.226.148.67:5000/icon/2.jpg" alt=""/>
        <p class="ActTitle">美艳纯红礼服连衣裙</p>
        <p class="ActPrice">￥138</p>
        <s class="orActPrice">￥158</s>
      </div>

      <div class="ActScrollXItem"  @click="todetail(201616060303)">
        <img class="ActXimg" src="http://43.226.148.67:5000/icon/3.jpg" alt=""/>
        <p class="ActTitle">Intel酷睿i9游戏水冷主机</p>
        <p class="ActPrice">￥8399</p>
        <s class="orActPrice">￥10500</s>
      </div>

      <div class="ActScrollXItem"  @click="todetail(201616060301)">
        <img class="ActXimg" src="http://43.226.148.67:5000/icon/1.jpg" alt=""/>
        <p class="ActTitle">小镇珊珊毛织上衣</p>
        <p class="ActPrice">￥138</p>
        <s class="orActPrice">￥666</s>
      </div>

      <div class="ActScrollXItem"  @click="todetail(201616060304)">
        <img class="ActXimg" src="http://43.226.148.67:5000/icon/4.jpg" alt=""/>
        <p class="ActTitle">汤臣倍健蛋白粉</p>
        <p class="ActPrice">￥308</p>
        <s class="orActPrice">￥338</s>
      </div>

      <div class="ActScrollXItem"  @click="todetail(201616060302)">
        <img class="ActXimg" src="http://43.226.148.67:5000/icon/2.jpg" alt=""/>
        <p class="ActTitle">美艳纯红礼服连衣裙</p>
        <p class="ActPrice">￥138</p>
        <s class="orActPrice">￥158</s>
      </div>

      <div class="ActScrollXItem"  @click="todetail(201616060303)">
        <img class="ActXimg" src="http://43.226.148.67:5000/icon/3.jpg" alt=""/>
        <p class="ActTitle">Intel酷睿i9游戏水冷主机</p>
        <p class="ActPrice">￥8399</p>
        <s class="orActPrice">￥10500</s>
      </div>

      <div class="ActScrollXItem"  @click="todetail(201616060301)">
        <img class="ActXimg" src="http://43.226.148.67:5000/icon/1.jpg" alt=""/>
        <p class="ActTitle">小镇珊珊毛织上衣</p>
        <p class="ActPrice">￥138</p>
        <s class="orActPrice">￥666</s>
      </div>

    </div>

    <img  class="content" alt="" src="../../assets/images/contentFoot.jpg">

    <div style="width: 100%;height: 50px"> </div>


  </div>
</template>


<script>

  export default {
      created:function(){
          this.scrWidth = document.body.clientWidth;
      },
      data:function () {
        return{
          scrWidth:20,//屏幕原始尺寸
          URL:'http://43.226.148.67:5000/',
          show: false,//产品参数是否显示
          detailJson:666,//产品完整Json数据
          tagSelected:null,
        }
      },

    methods: {
      todetail:function (ID) {
        console.log('点击了一下下');
        this.$router.push('/pages/details/main?ID=' + ID);
      },

      // onChange:function(event) {
      //       wx.showToast({
      //           icon: 'none',
      //           ActTitle: `切换至第${event.detail}项`
      //       });
      //   }
      },
  }
</script>

<style>
  .header{
    width: 100%;
    height: 250px;
    display: block;
  }
  .content{
    width: 100%;
    height: 50px;
  }
  .ActScrollX{
    height: 195px;
    overflow: auto;
    background-color: #C9E3F0;
    white-space:nowrap;
  }
  .ActScrollXItem{
    height: 168px;
    width: 100px;
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block;
    overflow: hidden;
    border-radius: 5px;
    background-color: white;
  }
  .ActXimg{
    width: 100px;
    height: 100px;
  }
  .ActTitle{
    width: 90px;
    height: 39px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal !important;
    line-height: 18px;
    padding: 5px;
    font-size: 13px;
    margin-bottom: 5px;
  }
  .ActPrice{
    font-size: 15px;
    display: inline-block;
    margin-right: 10px;
    margin-left: 3px;
    color: #ff702d;
  }
  .orActPrice{
    font-size: 10px;
    text-decoration: line-through;
    display: inline-block;
    color: #aaaaaa;
  }
</style>
